<?php
/**
 * Created by dutuwang.net
 * User: adophper <hello@adophper.com>
 * Date: 2018/4/2
 * Time: 21:19
 */
$id = array();
?>
<style>
.city-row {
    position: relative;
}
.city-select-list span {
    margin: 5px 10px;
}
.city-row .col-md-3 {
    margin: 5px 0;
    cursor: pointer;
}
/*.city-row span {
    padding: 5px;
    border: 2px solid transparent;
}*/
.city-row .act {
    position: relative;
    z-index: 1;
    color: #ff3300;
    font-weight: bold;
}
.city-row .nav-tabs > li.active > a, .city-row .nav-tabs > li.active > a:hover, .city-row .nav-tabs > li.active > a:focus {
    color: #1dbe69;
    border: 0 none;
    border-bottom: 2px solid #1dbe69;
    font-weight: bold;
}
.city-row .nav > li > a, .city-row .nav-tabs > li > a:hover, .city-row .nav > li > a:hover, .city-row .nav > li > a:focus {
    border: 0 none;
    background-color: transparent!important;
    color: #4c4c4c;
}
</style>
<div class="city-row" style="padding: 0 15px 15px;">
    <div class="row">

        <div class="col-md-12 city-select-list" style="<?=!empty($city_arr)?:'display: none;'?>">
            已选择：
            <?php
            if (!empty($city_arr)) {
                foreach ($city_arr as $val){
                    $id[] = $val['id'];
                ?>
                <span class=" label label-success" data-id="<?=$val['id']?>" title="移出"><?=$val['name']?></span>
                <?php
                }
            }
            ?>
        </div>

    </div>
    <div class="row" style="margin-bottom: 10px;">

        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#hot" role="tab" data-controls="hot" data-toggle="tab" aria-expanded="true">热门城市</a></li>
            <li class=""><a href="#dataA" role="tab" data-controls="dataA" data-toggle="tab" aria-expanded="true">ABCDEF</a></li>
            <li class=""><a href="#dataB" role="tab" data-controls="dataB" data-toggle="tab" aria-expanded="true">GHJKLM</a></li>
            <li class=""><a href="#dataC" role="tab" data-controls="dataC" data-toggle="tab" aria-expanded="true">NOPQRS</a></li>
            <li class=""><a href="#dataD" role="tab" data-controls="dataD" data-toggle="tab" aria-expanded="true">TUWXYZ</a></li>
        </ul>
        <div class="tab-content" style="margin-top: 15px;">
            <div role="tabpanel" class="tab-pane fade in active" id="hot">
                <?php
                if (!empty($hot)) {
                    foreach ($hot as $item) {
                ?>
                <div class="col-md-3 col-xs-3 col-sm-3 select-city" data-id="<?=$item['id']?>"><span class="<?=!empty($id)&&in_array($item['id'], $id)?'act':''?>"><?=$item['name']?></span></div>
                <?php
                    }
                }
                ?>
            </div>
            <?php
            if (!empty($data)) {
                foreach ($data as $key => $arr) {
                    if (!empty($arr)) {
            ?>
            <div role="tabpanel" class="tab-pane fade " id="data<?=$key?>">
            <?php
                foreach ($arr as $item) {
            ?>
            <div class="col-md-3 col-xs-3 col-sm-3 select-city" data-id="<?=$item['id']?>"><span class="<?=!empty($id)&&in_array($item['id'], $id)?'act':''?>"><?=$item['name']?></span></div>
            <?php
                }
            ?>
            </div>
            <?php
                    }
                }
            }
            ?>
        </div>
    </div>
</div>
<script type="text/template" id="child-city">
    <% _.each(obj, function(n, i){ %>
    <div class="col-md-3 "><span data-id="<%=i%>"><%=n%></span></div>
    <% }) %>
</script>

<script>
    $(function () {
        $(".select-city").unbind('click').bind('click', function(e){
            var id = $(this).data('id');
            var txt = $(this).text();
            if ($(this).find('span').hasClass('act')){
                $(this).find('span').removeClass('act');
                $(".city-select-list").find("span[data-id="+id+"]").remove();
            }else{
                if ($(".city-select-list").find("span").length >= 5) {
                    alert('最多可以选择5个城市或地区');
                    return false;
                }
                //$(".select-city").find("span").removeClass('act');
                $(this).find('span').addClass('act');
                var compiled = _.template("<span class=\" label label-success\" data-id=\"<%=id%>\" title=\"移出\"><%=name%></span>")
                $(".city-select-list").append(compiled({id: id, name: txt}))
            }
            if ($(".city-select-list").find("span").length == 0){
                $(".city-select-list").hide();
            }else{
                $(".city-select-list").show();
            }
        })


        $('#formModal .btn-primary').unbind('click').bind('click', function (e) {
            var cityArr = $(".city-select-list").find('span').map(function(e){
                return {id: $(this).data('id'), name: $(this).html()}
            }).get();
            $("#city_arr").val(encodeURI(JSON.stringify(cityArr)));
            var city = $(".city-select-list").find('span').map(function(e){
                return $(this).html();
            }).get().join(",");
            $("#city").val(city);
            $("#formModal").modal('hide');
        })

    })
</script>
